<template>
	<van-stepper
		v-bind="$attrs"
		v-model="curValue"
		:disabled="computedDisabled"
		@blur="handleBlur"
		@focus="handleFocus"
		@change="onChange"
	/>
</template>
<script lang="ts" setup>
import { stepperProps } from './stepper';
import { debounce, IEvent } from '@/core';
import { useEditorTypeParams } from '@/hooks/use-editor';
interface EditorEmit {
	(name: 'component-action', value: IEvent<string>): void;
}
const props = defineProps(stepperProps);
const emit = defineEmits<EditorEmit>();
// 类型校验
const { validateConfig } = useEditorTypeParams();
validateConfig();
const curValue = ref();
watch(
	() => props.value,
	(newVal: any, oldVal: any) => {
		curValue.value = newVal;
	},
	{
		immediate: true,
	}
);
const computedDisabled = computed(() => {
	return props.disabled && props.readonly;
});

const onChange = (value: any) => {
	const params = {
		name: `${props.name}`,
		action: 'valueChange',
		data: value,
	};
	isDebounce(params);
};

const handleFocus = ($event: any) => {
	const { target } = $event;
	if (!target) {
		return;
	}
	let { value } = target;
	doEditorEmit({
		name: `${props.name}`,
		action: 'editorFocus',
		data: value,
	});
};
const handleBlur = ($event: any) => {
	const { target } = $event;
	if (!target) {
		return;
	}
	let { value } = target;
	doEditorEmit({
		name: `${props.name}`,
		action: 'editorBlur',
		data: value,
	});
};

const doEditorEmit = (params: any) => {
	emit('component-action', params);
};

const isDebounce = (params: IEvent<string>) => {
	debounce(doEditorEmit, [params], getCurrentInstance(), 300);
};
</script>
